<template>
 
    <view class="box">
    <scroll-view scroll-y
    @scroll="scrollToLower"
    >
      <view class="item-box" v-for="(item, index) in invitationData" :key="index">
      <view class="user-box" @click.stop="toPerson(item.user_id)">
        <view class="user-img" :style="`--url:url(${item.user_img})`"></view>
        <view class="user-text">
          <view class="user-name">{{ item.nickname }}</view>
          <view class="user-time">{{ createTime(item.create_time) }}</view>
        </view>
        <view class="follow">
          <view v-if="item.user_id != memberStore.userinfo.user_id" class="text" @click.stop="followUser(item.user_id,index)" :class="item.is_follow ? 'follow-click' : ''">{{ item.is_follow ? '取消关注' : '关注' }}</view>
          <view v-else class="delete"><uni-icons
            type="trash"
            color="#FFADBB"
            size="24"
            circle
            @click="deleteInvatation(item.id,index)"
          /></view>
        </view>
      </view>
      <view class="content" >
        <view class="text" @click.stop="invitationDetail(index)" >{{ item.content }}</view>
        <view v-if="item.is_img" class="img-box">
          <!-- 1 -->
          <view @click="privewImg(item.url_list[0], item.url_list)" v-if="item.url_list.length == 1" class="content-img"
            :style="`--url:url(${item.url_list[0].url})`"></view>
          <!-- 2 -->
          <view v-else-if="item.url_list.length == 2 || item.url_list.length == 4"
            v-for="(itemImg, imgindex) in item.url_list" :key="imgindex" class="content-img twoimg"
            @click="privewImg(itemImg.url, item.url_list)" :style="`--url:url(${itemImg.url});`"></view>
          <!-- 3 -->
          <view v-else-if="item.url_list.length == 3" class="three-box">
            <view class="content-img three-one" @click="privewImg(item.url_list[0].url, item.url_list)"
              :style="`--url:url(${item.url_list[0].url})`"></view>
            <view class="right">
              <view class="content-img three-two" @click="privewImg(item.url_list[1].url, item.url_list)"
                :style="`--url:url(${item.url_list[1].url})`"></view>
              <view class="content-img three-three" @click="privewImg(item.url_list[2].url, item.url_list)"
                :style="`--url:url(${item.url_list[2].url})`"></view>
            </view>
          </view>
          <!-- 5 -->
          <view v-else v-for="(itemImg, imgindex) in item.url_list" class="content-img threeimg"
            @click="privewImg(itemImg.url, item.url_list)" :style="`--url:url(${itemImg.url});`"></view>
        </view>
      </view>
      <view class="footer">
        <view class="left">
          <uni-icons @click="showCopy(item.id)" type="undo" color="rgba(51, 51, 51, .6)" size="28" />
        </view>
        <view class="right">
          <view class="r"> <uni-icons @click="clickLike(index)" v-if="item.like_type" type="heart-filled"
              color="#24edc2" size="28" />
            <uni-icons v-else @click="clickLike(index)" type="heart" color="rgba(51, 51, 51, .6)" size="28" />
            <view class="like_num">{{ item.like ? item.like : '' }}</view>
          </view>
          <view class="l">
            <uni-icons @click="commentmsg(item.id,item.comment_num)" type="chat" color="rgba(51, 51, 51, .6)" size="28" />
            <view class="comment_nums">{{ item.comment_num ? item.comment_num : ' ' }}</view>
          </view>
        </view>
      </view>
    </view>
    </scroll-view>
  </view>

</template>

<script setup lang="ts">
import Invitation from '@/pages/invitation/invitation.vue';
import { ref, computed } from 'vue'
import {useMemberStore} from "@/stores/modules/member.ts"
const memberStore = useMemberStore()
const emit = defineEmits(['get-invitationId','get-follower','click-like','scroll-tolower','get-detail'])
//删除帖子
const  deleteInvatation=(id,index)=>{
  console.log(id);
uni.request({
  url: 'invitation/delete/',
  data: {invitation_id:id},
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    console.log(data);
  if(data.code==200)
  {
   Prop.DeleteInvitation(index)
  }
  else{
    uni.showToast({
      title: data.errmsg,
      icon: 'error',
      mask: true
    })
  }
  },
  fail: (error) => {}
})
}
//分享
const showCopy = (id)=>{
uni.setClipboardData({data:`https://www.damer.asia/#/pages/invitation/invitation?invitation_id=${id}`})

}
const toPerson=(user_id)=>{
  uni.navigateTo({ url: `/pages/personal/personal?user_id=${user_id}` })
}
//关注博主
const followUser=(user_id,index)=>{
uni.request({
  url: 'user/follow/',
  data: {user_id:user_id},
  header: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  method: 'POST',
  sslVerify: true,
  success: ({ data, statusCode, header }) => {
    if(data.code==200){
      emit('get-follower',index)
    }
    else{
      uni.showToast({
        title: data.errmsg,
        icon: 'error',
        mask: true
      })
    }
  },
  fail: (error) => {}
})
}
const invitationDetail = (index)=>{
  emit('get-detail', index)
}
const scrollToLower = (event)=>{
  console.log('ppdp',event);
  
  emit('scroll-tolower','')
}
const commentmsg = (id,num) => {
  emit('get-invitationId', id,num)
}
const privewImg = (url, urls) => {
  
  uni.previewImage({
    current: url,
    urls: urls.map(item => item.url),

  })
}
const Prop = defineProps(['invitationData','DeleteInvitation'])

const createTime = computed(() => (date) => {
  const nowdate = new Date()
  const createdate = new Date(date)
  const S = Math.ceil(Math.abs(nowdate - createdate) / 1000)
  if (S < 60) {
    return S + '秒前'
  }
  if (S / 60 < 60) {
    return Math.ceil(S / 60) + '分钟前'
  }
  if (S / 3600 < 24) {
    return Math.ceil(S / 3600) + '小时前'
  }
  if (S / 3600 / 24 < 24 * 4) {
    return Math.ceil(S / 3600 / 24) + '天前'
  }
  else {
    return date.split(" ")[0]
  }
})
//点赞
const clickLike = (index) => {
emit('click-like',index)
}
</script>

<style lang="scss" scoped>
.box {
  padding-top: 28.846rpx;
  margin: 0px 30.769rpx;

  .item-box {
    margin-bottom: 13.462rpx;
    border-bottom: .5rpx solid rgba(51, 51, 51, .2);

    .user-box {
      display: flex;
      align-items: center;

      .user-img {
        --url: url(https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080);
        width: 80.769rpx;
        height: 80.769rpx;
        border-radius: 50%;
        background-image: var(--url);
        background-position: center;
        background-size: cover;
      }

      .user-text {
        margin-left: 17.308rpx;

        .user-name {
          color: rgba(51, 51, 51, 1);
          font-size: 26.923rpx;
          font-weight: 500;
        }

        .user-time {
          margin-top: 7.692rpx;
          color: rgba(51, 51, 51, .6);
          font-size: 23.077rpx;
          font-weight: 400;
        }
      }

      .follow {
        display: flex;
        justify-content: flex-end;
        flex-grow: 1;

        .text {
          height: 42.308rpx;
          padding: 0 19.231rpx;
          color: #fff;
          font-size: 26rpx;
          text-align: right;
          border-radius: 57.692rpx;
          letter-spacing: 0.05em;
          line-height: 42.308rpx;
          background-color: #24edc2;
          // border: 1px solid rgba(51, 51, 51, .7);

        }

        .follow-click {
          color: rgba(51, 51, 51, .5);
          font-size: 20rpx;
          border-radius: 57.692rpx;
          border: 1px solid rgba(51, 51, 51, .3);
          background-color: rgba(51, 51, 51, 0);

        }

      }
    }

    .content {
      .text {
        margin: 23.077rpx 0 15.385rpx;
        color: rgba(51, 51, 51, 1);
        font-size: 30.769rpx;
        font-family: 400;
        line-height: 40.385rpx;
      }

      .img-box {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .content-img {
          --url: url(https://i1.mcobj.com/uploads/20220201_8956d927cd58f.jpg-1920x1080);
          width: 100%;
          height: 492.308rpx;
          border-radius: 19.231rpx;
          background-image: var(--url);
          background-position: center;
          background-size: cover;
          margin-bottom: 11.538rpx;
        }

        .twoimg {
          width: 336.538rpx;
          height: 336.538rpx;
        }

        .threeimg {
          width: 225rpx;
          height: 225rpx;
          margin-bottom: 5.769rpx;
        }

        .three-box {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .three-one {
            width: 455rpx;
            height: 455rpx;
            border-radius: 19.231rpx 0 0 19.231rpx;
          }

          .right {
            .three-two {
              width: 225rpx;
              height: 225rpx;
              border-radius: 0 19.231rpx 0 0;
              margin-bottom: 5rpx;

            }

            .three-three {
              width: 225rpx;
              height: 225rpx;
              border-radius: 0 0 19.231rpx 0;
            }
          }

        }
      }
    }

    .footer {
      display: flex;
      align-items: center;
      padding: 15rpx 0;

      .left {
        flex-grow: 1;

        .show {
          width: 48rpx;
        }
      }

      .right {
        min-width: 248.205rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .r {
          width: 50%;
          display: flex;
          align-items: center;
        }

        .l {
          width: 50%;
          align-items: center;
          justify-content: center;
          display: flex;
        }

        .like {
          width: 48rpx;
          transform: translateY(-3.923rpx);
        }

        .like_num {
          margin: 0 9.615rpx;
          color: rgba(51, 51, 51, .7);
        }

        .comment {
          width: 48rpx;
          margin-left: 48rpx;
          margin-right: 9.615rpx;
        }

        .comment_nums {
          min-width: 57.692rpx;
          color: rgba(51, 51, 51, .7);
        }
      }
    }
  }
}
</style>